<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="js/jquery-easyui-1.4.4/themes/bootstrap/easyui.css">
		<link rel="stylesheet" href="js/jquery-easyui-1.4.4/themes/icon.css">
		<link rel="stylesheet" href="css/ext_icon.css">
		<script src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
		<script src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
		<script src="js/ext_jquery.js"></script>
		<script src="js/ext_easyui.js"></script>
		<script src="js/jquery.form.js"></script>
		<script src="js/My97DatePicker/WdatePicker.js"></script>
		<script src="js/Chart.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/ckeditor/ckeditor.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/main.js"></script>
		<title>table</title>
		<script>
			var dataGrid;
			$(function() {
				dataGrid = $('#datetable').datagrid({
					url: 'js/jquery-easyui-1.4.4/demo/datagrid/datagrid_data1.json', //请求地址
					fit: true, //自动补全
					fitColumns: true, //列是否自适应宽度
					striped: false, //隔行颜色
					collapsible: false, //是否可改变列宽
					singleSelect: true, //单一选中行
					border: true,
					pagination: true, //是否分页
					rownumbers: true, //是否显示行号列
					idField: 'id',
					pageSize: 10,
					pageList: [10, 20, 30, 40, 50],
					remoteSort: false, //是否通过远程排序
					nowrap: false, //是否强制不换行显示内容
					checkOnSelect: false,
					frozenColumns: [
						[{
							field: 'productid',
							title: '产品id',
							width: 200,
							align: 'center',
							sortable: false
						}]
					],
					columns: [
						[{
							field: 'productname',
							title: '产品名称',
							width: 200,
							align: 'center',
							sortable: false
						}, {
							field: 'action',
							title: '操作',
							width: 100,
							align: 'center',
							sortable: false,
							formatter: function(value, row) {
								var str = '';
								str += $.formatString('<img onclick="editCareKnowledge(\'{0}\');" src="{1}" title="修改">&nbsp;', row.id, 'images/ext_icons/pencil.png');
								str += $.formatString('<img onclick="onceCareKnowledge(\'{0}\');" src="{1}" title="明细">&nbsp;', row.id, 'images/ext_icons/shield.png');
								return str;
							}
						}]
					],
					toolbar: [{
						text: '增加（弹框）',
						iconCls: 'icon-add',
						handler: function() {
							add();
						}
					}, {
						text: '增加（标签）',
						iconCls: 'icon-add',
						handler: function() {
							openTabs('form.html', '添加', 1);
						}
					}]
				});
			});

			function add() {
				var dialog = parent.$.modalDialog({
					title: '新增',
					width: 500,
					height: 200,
					href: 'mform.html',
					buttons: [{
						text: '提交',
						handler: function() {
							parent.$.modalDialog.openner_dataGrid = dataGrid;
							//var f = parent.$.modalDialog.handler.find('#form');
							//f.submit();
						}
					}, {
						text: '关闭',
						handler: function() {
							parent.$.modalDialog.handler.dialog('close');
						}
					}]
				});
			}
		</script>
	</head>

	<body>
		<table id="datetable"></table>
	</body>

</html>